<template>
	<view class="start-page-view">
		<text class="greeting-text">你好，我是你的AI助手</text>
		<text class="intro-text">作为你的智能伙伴，我既能写文案，想点子，又能写代码，做表格</text>
		<view class="question-hint">
			<view class="question-text">你可以试着问我:</view>
			<view class="change-btn" @click="rendomData('002')">
				<image src="/static/换一换.png" mode="widthFix" 
				:class="{'rotate-animation':isRotating}"></image>
				<text>换一换</text>
			</view>
		</view>
		<!-- 用户的默认问题 -->
		<view class="default-questions">
			<view class="default-questions-item" v-for="(item,index) in newData" :key="index" 
			@click="send(item.problem)">
				<image :src="item.icon" mode="widthFix"></image>
				<view class="">{{item.title}}</view>
				<text class="text-show">{{item.problem}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad} from '@dcloudio/uni-app'
	import M1 from '/static/start-img/m1.png'
	import M2 from '/static/start-img/m2.png'
	import M3 from '/static/start-img/m3.png'
	import M4 from '/static/start-img/m4.png'
	import M5 from '/static/start-img/m5.png'
	import M6 from '/static/start-img/m6.png'
	import M7 from '/static/start-img/m7.png'
	import M8 from '/static/start-img/m8.png'
	const problemData=[
		{
			icon:M1,
			title:'农夫山泉新品上市策略',
			problem:'请分析近期农夫山泉"绿瓶"纯净水上市的原因'
		},
		{
			icon:M2,
			title:'2024电动汽车年终大盘点',
			problem:'帮我整理一下2024电动汽车行业的大动态&大新闻'
		},
		{
			icon:M3,
			title:'活动方案策划',
			problem:'设计一份党纪学习教育实践活动的方案策划'
		},
		{
			icon:M4,
			title:'申论备考干货汇总',
			problem:'基于6篇文档，归纳出详细、具体的申论写作技巧，同时就如何提升申论写作能力进行解答'
		},
		{
			icon:M5,
			title:'心得体会',
			problem:'帮我写《红楼梦》的心得体会，字数不少于800字'
		},
		{
			icon:M6,
			title:'评析是申论范文',
			problem:'评审9篇申论范文的优缺点。以国家公务员申论考试为标准，从主题、结构、思想等方面进行阐述'
		},
		{
			icon:M7,
			title:'领导发言稿润色',
			problem:'润色这篇讲话稿，要求保留全文主要意思和结构，适当增加引经据典'
		},
		{
			icon:M8,
			title:'泉州热门景点',
			problem:'我来泉州旅游，请给我一些热门景点或者线路作参考'
		},
	]
	onLoad(()=>{
		rendomData('001')
	})
	//随机取4项
	const newData=ref([])
	const isRotating = ref(false)
	const rendomData=(val)=>{
		// 防止多次点击
		if(isRotating.value)return
		newData.value = [...problemData].sort(()=>Math.random()-0.5).splice(0,4)
		 if(val=='002'){
			 isRotating.value = true
			 setTimeout(()=>{
				 isRotating.value = false
			 },1000)
		 }
	}
		import {chatbotMessage} from '@/store/index.js'
	// 发送
	const send =(val )=>{
		chatbotMessage().startSending(val)
	}
</script>

<style lang="less" scoped>
	.start-page-view{
		background-color: #ffffff;
		border-radius: 5rpx;
		margin: 20rpx;
		padding: 20rpx;
		.greeting-text{
			font-size: 40rpx;
			font-weight: bold;
		}
		.intro-text{
			color:#777A8D;
			line-height: 1.5;
			padding: 25rpx 0;
		}
		.question-hint{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.question-text{
				color:#777A8D;
			}
			.change-btn{
				display: flex;
				align-items: center;
				image{
					width: 30rpx;
					margin: 0 10rpx;
				}
				text{
					color:#5A56D0;
				}
				.rotate-animation{
					transition: 1s;
					transform: rotate(360deg);
				}
			}
		}
		.default-questions{
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 20rpx;
			padding-top:25rpx ;
			.default-questions-item{
				background-color: #F7F8FC;
				padding: 20rpx;
				border-radius: 4rpx;
				image{
					width: 50rpx;
				}
				view{
					font-weight: bold;
					padding: 10rpx 0;
				}
				text{
					color:#777A8D;
					line-height: 1.5;
					-webkit-line-clamp: 2 !important;
				}
			}
		}
	}
</style>